@import 'variables'
@import 'nib'
@import 'mixins'

html, body
  margin 0
  padding 0
  -webkit-font-smoothing: antialiased

*
  word-wrap: break-word
  outline: none

body
  font: 13px 'Helvetica Neue', Helvetica, Arial, sans-serif
  background: #EEE
  color: #333
  stretch()
  overflow: hidden

a
  color: color-link
  cursor: pointer
  &:hover
    color: color-link-hover
    text-decoration: none

.inline
  display: inline !important

#incompatible
  background-color: #fff
  bottom: 0
  font-size: 20px
  left: 0
  padding-top: 100px
  position: absolute
  right: 0
  text-align: center
  top: 0
  z-index: 10000

svg
  display: block
  width: 100%
  overflow: hidden

[play-topic], [help-topic], [server-topic], [exec-topic], a[target], .warn
  vertical-align: baseline
  &:before
    font-family: "streamline"
    padding-right: 4px
    vertical-align: top
  &.no-icon
    &:before
      padding-right: 0
      content: '' !important

[play-topic], [server-topic], [exec-topic]
  &:before
    content: "w"

[help-topic], .warn
  &:before
    content: "z"

table.data
  width: 100%
  margin-bottom: 0
  thead tr th, tfoot tr th
    text-align: left
    height: middlebar-height
    font-weight: bold
    padding: 0 horizontal-padding
    line-height: middlebar-height
    border-bottom: 1px solid table-color-border-color
  tbody tr td, tr td, tfoot tr td
    border-bottom: 1px solid table-color-border-color
    vertical-align: top
    line-height: 26px
    padding: 0 horizontal-padding
  tbody tr
    background-color: #fff
    //&:hover
    // background-color: #F8F8F9

table.json-object
  background-color: #eee;
  border-radius: 5px;
  margin: 20px 10px;
  tbody
    tr
      background-color: transparent;
      &:first-child td, &:first-child th
        border-top: none;
      td, th
        border-bottom: none;
        color: #666;
        line-height: 26px;
        padding: 2px 10px;
        max-width: 320px;

.table-fixed
  table-layout fixed
  &.th-100
    th
      width 100px
.status-bar-wrapper
  height: 68px
  display: none
.status-bar
  min-height: middlebar-height
  line-height: middlebar-height
  color: rgb(120, 129, 133)
  font-size: 13px
  position: relative
  background-color: #FFF
  white-space: nowrap
  overflow: hidden
  border-top: 1px solid #e6e9ef
  .btn-group
    absolute: top 3px right 12px
  .icon-warning-sign
    font-size: 18px
  .status
    position: relative
    float: left
    padding-left: horizontal-padding
    margin-top: 0
    margin-bottom: 0
    width: 100%
    &
    .inspector-footer-row
      // line-height: 21px
      margin-top: inspector-footer-row-margin
    .status-bar-actions
      absolute: right 0px
      top: -1px
    p
      line-height: middlebar-height - inspector-footer-row-margin
      margin: 0
  .popover.bottom
    line-height: 22px
    .arrow:after
      border-bottom-color: #f7f7f7
      border-top-width: 0
  .details
    margin-top: -4px
    margin-left: 12px
  .updated-code
    float:right
    margin-right horizontal-padding
  &.error
    min-height: middlebar-height
    color: color-error
    white-space: normal
    line-height: 12px
    height: auto
    padding-top: 9px
    &.client-warning
      color: color-warning-on-white
  i[class*="fa-"]
    margin: 0
  .fa-ok
    color: color-success

.fullscreen-container
  position: absolute
  left: 0
  top: 0
  bottom: 0
  right: 0
  background-color: #fff
  z-index: 1030
  .carousel-control
    left: -20px
    &.right
      right: -15px
      left: auto
  .code-bar
    background-color: #fff
    position: relative
    z-index: 2
    margin: 0
    .actions
      display: none
    a.close-fullscreen
      display: block
      absolute: top 3px right 16px
      color: #9B9DA2
      font-size: 20px
  a.fa-download
    color: #9B9DA2
    absolute: top 9px right 18px
    font-size: 22px
  .result
    background-color: #F8F9FB
    .btn-group
      absolute: bottom 0 right 32px
  .view-result
    top: middlebar-height
    bottom: 0
    left: 0
    right: 0
    position: absolute
    overflow-y: auto
    .view-result-graph
      width: 100%
      height: 100%
      .status-bar
        position: fixed
        bottom: 0
        width: 100%
      .graph-holder
        display: table
        width: 100%
        height: 100%
        &.one-legend-row
          .frame-notifications
            padding-top: legend-row-height
        &.two-legend-rows
          .frame-notifications
            padding-top: legend-row-height*2
        > *
          display: table-row
          > .cell
            display: table-cell
            border-top: 1px solid #e6e9ef
            width: 100%
            height: middlebar-height
            line-height: middlebar-height
            vertical-align: middle
        svg.graph
          height: 100%
        .graph-contents
          position: relative
          height: 100%
    .view-result-table
      .table-holder
        padding-bottom: (middlebar-height - 1)
        background: #fff
        .ascii-table
          background-color: #fff
      .status-bar
        position: fixed
        bottom: 0
        width: 100%
    .view-result-plan
      display: table
      width: 100%
      height: 100%
      .plan-holder
        width: 100%
        height: 100%
        padding-bottom: (middlebar-height - 1)
        background: #fff
      .status-bar
        position: fixed
        bottom: 0
        width: 100%
    .view-result-raw
      .raw-holder
        padding-bottom: (middlebar-height - 1)
      .status-bar
        position: fixed
        bottom: 0
        width: 100%
  .legend
    max-height: none;
  .left-frame-toggle
    display: none

.toggle
  ball-size = 20px
  travel = 24px
  duration = 0.2s

  float: left
  font-weight: bold
  font-size: 11px
  text-transform: uppercase
  a
    color: #9b9da2
    position: relative
    top: -3px
    transition: color 0.25s
    &:hover
      color: #40454f
    &.toggle-connect
      padding: 12px 0 12px 16px

  .switch
    position: relative
    top: 3px
    display: inline-block
    margin-left: 3px
    margin-right: 5px

    height: ball-size
    width: ball-size + travel
    user-select: none

    label
      margin-bottom: 0
      display: block
      overflow: hidden
      cursor: pointer
      border-radius: 50px
      height: ball-size
      .switch-inner
        width: travel*3
        height: ball-size
        background-color: #D2D5DA
        margin-left: -54%
        &.right
          > .right-text
            color: #319113
        &.right-start
          margin-left 0
        &.right, .right-add.right-add-active
          margin-left: 0
          border-color: #D2D5DA
        &.right-remove.right-remove-active
          border-color: #D2D5DA
          margin-left: -54%
        &.right-add, &.right-remove
          transition: all duration ease-in 0s
        > span
          height: 100%
          line-height: ball-size
          display: block
          float: left
          font-size: 10px
          width: ball-size+4
          &.left-text
            text-align: left
          &.right-text
            text-align: right
        .handle
          width: ball-size
          height: ball-size
          margin: 0

          background: #FFFFFF
          border-radius: 50%
          float: left
          border: 2px solid #CED3D8

// Hack to prevent SVG wrapped in a table-row container to grow indefinitely
.browser-firefox .fullscreen-container svg
  position: absolute
  bottom: 0
  left: 0
  right: 0
  top: 0

.key.code
  display: inline-block
  min-width: 24px
  padding: 5px 6px
  font-size: 14px
  line-height: 1
  color: #eee
  text-align: center
  // text-shadow: 0 1px 0 rgba(0,0,0,0.5)
  text-transform: capitalize
  background-color: #555
  border-radius: 3px
  font-weight: bold;
  font-size: 12px;
  font-family: "Courier New", Terminal, monospace
  font-family: mono-font-family
  // box-shadow: inset 0 -2px 0 #111
  .single
    width: 80px

//
// Bootstrap overrides
//////////////////////

.navbar-inverse .navbar-inner
  background: linear-gradient(top, #333, #181818)

.navbar-inner
  padding-left: horizontal-padding
  padding-right: horizontal-padding

.navbar .brand
  color: #fff
  font-weight: bold
  line-height: 18px
  padding-top: 8px
  padding-left: horizontal-padding
  margin-top: -2px

.navbar .nav .dropdown-toggle .caret
  margin-top: 27px

.navbar .nav > li > a
  padding-top: 0
  padding-bottom: 0
  line-height: topbar-height - 2px

.navbar .nav > li:last-child > a
  padding-right: 0

.fa-margin-right
  margin-right: 0.5em

.fa-margin-left
  margin-left: 0.5em

select
  margin-bottom: 0

.dl-horizontal
  dt
    width 120px
  dd
    margin-left 140px

.table-help
  tr
    vertical-align top

.table-help
  th
  td
    border 0

.table-help
  th
    text-align right
    margin 0
    padding-left 0
    white-space: nowrap

.table td.wrapped
  word-break break-all


/////
#error
  position: fixed
  top: 0
  height: banner-height
  left: nav-width
  right: 0
  background-color: color-error
  z-index: 100;
  display: none
  line-height: 73px
  color: #fff
  padding-left :24px
  font-size: 15px
  font-weight: bold

#noticebar
  position: fixed
  top: 0
  height: banner-height
  left: nav-width
  right: 0
  color: white
  background-color: color-notice
  z-index: 100;
  padding-left:24px
  padding-top:12px
  font-size: 15px
  line-height: 24px
  font-weight: normal
  overflow:hidden
  word-break: keep-all
  .notification button
    width: 200px
    padding: 2px
    margin-bottom: 6px
    border-radius: 6px !important;
  a
    color: lighten(color-link, 30)
    cursor: pointer
    text-decoration: underline
    &:hover
      color: lighten(color-link-hover, 30)
      text-decoration: none
    &:visited
      text-decoration: none


.connection-error
  #error
    display: block

#main
  position: absolute
  overflow: hidden
  top: 0
  bottom: 0
  left: nav-width
  right: 0
  z-index: 10
  background-color: #D2D5DA
  transist all

  .intro
    stretch()
    display: none
    text-align: center
    position: absolute
    text-align: center
    background: url(../images/intro.png) 50% 48% no-repeat

  footer
    bottom: 22px
    color: #A0AAB1
    font-size: 15px
    left: 0
    line-height: 23px
    padding: 0 24px
    position: absolute
    right: 0
    text-align: center

.update-button
  position:absolute
  bottom: 16px
  right: 16px

// UI states
.show-drawer
  #main
    left: (drawer-width + nav-width);

.alert-box.global
  margin-bottom: 0
  .close
    display: none


#editor
  &.file-loaded
    .view-editor
      top: 39px
  &.maximize-editor
    height: 100% !important
    .view-editor
      bottom: 0
    .message-bar
      position: absolute
    .CodeMirror
      position: absolute
      left: 0
      right: 0
      top: 0
      bottom: 0
    .CodeMirror-scroll
      max-height: initial

// TODO: implement this class as @extend .fa-pencil
.edit-in-place
  .edit-in-place-input
    border: none
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
    border-radius: 3px
    padding: 2px 8px
    font-size: 13px
    width: 157px - 16px
    position: relative
    top: 1px
    font-weight: bold
    color: #000;
    line-height: 28px
  .edit-in-place-trigger
    &:before
      content: "\f040"
    [class*="fa-"]:before, [class*=" fa-"]:before
      text-decoration: inherit
      display: inline-block
      speak: none
    color: drawer-color-fg-icon
    &:hover
      color: drawer-color-fg-icon-hover
    display: none
    width: auto
    height: auto
    line-height: normal
    vertical-align: baseline
    margin-top: 0
    font-family: FontAwesome
    font-weight: normal
    font-style: normal
    text-decoration: inherit
    -webkit-font-smoothing: antialiased
    font-size: 16px

    cursor: pointer
    position: absolute
    right: 26px
    top: 11px

#diagnostics
  position: fixed
  bottom: 0
  height: 73px
  left: 0
  right: 0
  background-color: white
  opacity: 0.8
  z-index: 5000
  line-height: 73px
  color: black
  padding-left: 24px
  font-size: 15px
  font-weight: bold
span.error
  font-size: 11px
  color: red

.btn-good
  color: white
  background-color: color-yes
  border-radius: 6px

.btn-neutral
  background-color: color-no
  border-radius: 6px

.request-card
  float: left
  width: 45%
  margin: 15px 1% 20px 1%
  padding: 0 10px 20px 10px
  border: 1px solid #ccc
  border-radius: 4px
  background-color: #ffffff
  &.bolt-contents
    width: 80%
    pre
      white-space: pre-wrap
  .frame-card
    font-size: 12px
    margin: 10px 5px 0 5px
    .frame-card-contents
      padding: 0 10px
      margin: 0 5px
    pre
      font-size: 11px
    th, td
      padding: 0 0 0 1px
    tr td:first-child
      width: 30%
      &:first-letter
        text-transform: uppercase
    .div-toggler
      cursor: pointer
      &:before
        content: "\f0d7\00a0 "
        font-family: FontAwesome
      &.collapsed
        &:before
          content: "\f0da\00a0 "
          font-family: FontAwesome

.top-padded
  margin-top: 15px

.clearfix
  clearfix()
